<style scoped lang="less">
  .header-top{
    height:10px;
    background: transparent;
  }
  .head-left{
    position: fixed;
    top: 25px;
    left:10px;
    color: #7f7a8e;
  }
  iframe{
    min-width: 100%;
    min-height: 100%;
  }
  ul{
    margin-top: 60px;
  }
  img{
    width:100%;
  }
  .content{
    margin-top: 60px;
    overflow: hidden;
  }
  .big{
    position: relative;
    transform-origin:center;
  }
  .move{
    position: relative;
  }
  .picture{
    display: flex;
    flex-direction: row;
    width:900%;
  }
</style>

<template>
  <div class="pdf">
    <v-header></v-header>
    <img class="previewer-demo-img" 
         v-for="(item, index) in urlData" 
         :src="urlData.src"
         width="100" 
         @click="show(index)">
    <div v-transfer-dom>
      <previewer :list="urlData" ref="previewer" :options="options"></previewer>
    </div>
  </div>
</template>

<script>
  import { Previewer, TransferDom } from 'vux'
  import myKh from '../components/kh.vue'

  export default {
    directives: {
      TransferDom
    },
    components: {
      Previewer
    },
    data () {
      return {
        options: {
          getThumbBoundsFn (index) {
            // find thumbnail element
            let thumbnail = document.querySelectorAll('.previewer-demo-img')[index]
            // get window scroll Y
            let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
            // optionally get horizontal scroll
            // get position of element relative to viewport
            let rect = thumbnail.getBoundingClientRect()
            // w = width
            return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
            // Good guide on how to get element coordinates:
            // http://javascript.info/tutorial/coordinates
          }
        },
        urlData: []
      }
    },
    created () {
      this.baseService.get(`/trade/IBForms?form=${this.$route.query.form}`).then((res) => {
        res.data.forEach((item) => {
          this.urlData.push({
            src: item
          })
          console.log(item ,this.urlData)
        })
        this.show(0)
      })
    },
    mounted () {

    },

    methods: {
      goBack () {
        this.$router.go(-1)
      },
      show (index) {
        this.$refs.previewer.show(index)
      }
    }
  }
</script>
